<template>
  <div class="main" style="height: 500px">
    <el-table
      :data="userList.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      height="630">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form style="margin-left: 50px" label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user-solid"></i>
                  <span>用户名:</span>
                </span>
              </span>
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="昵称">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user"></i>
                  <span>昵称:</span>
                </span>
              </span>
              <span>{{ props.row.nickname }}</span>
            </el-form-item>
            <el-form-item label="密码">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-lock"></i>
                  <span>密码:</span>
                </span>
              </span>
              <el-button type="text" @click="openUpdatePassword(props.row)">
                <i class="el-icon-edit"></i>编辑密码
              </el-button>
            </el-form-item>
            <el-form-item label="邮箱">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-message"></i>
                  <span>邮箱:</span>
                </span>
              </span>
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-s-help"></i>
                  <span>性别:</span>
                </span>
              </span>
              <span>{{ props.row.gender }}</span>
            </el-form-item>
            <el-form-item label="生日">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-potato-strips"></i>
                  <span>生日:</span>
                </span>
              </span>
              <span>{{ props.row.birthday }}</span>
            </el-form-item>
            <el-form-item label="个人简介">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-s-comment"></i>
                  <span>个人简介:</span>
                </span>
              </span>
              <span>{{ props.row.info }}</span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>更新时间:</span>
                </span>
              </span>
              <span>{{ props.row.updateTime }}</span>
            </el-form-item>
            <el-form-item label="用户头像 URL" style="width: 1000px">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-paperclip"></i>
                  <span>用户头像 URL:   </span>
                    <a target="_blank" :href="props.row.avatar">{{ props.row.avatar }}</a>
                </span>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="用户 ID"
        width="400"
        prop="id">
      </el-table-column>
      <el-table-column
        label="用户名"
        width="180"
        prop="username">
      </el-table-column>
      <el-table-column
        label="昵称"
        width="180"
        prop="nickname">
      </el-table-column>
      <el-table-column
        width="180"
        label="注册时间"
        prop="createTime">
      </el-table-column>
      <el-table-column width="240" align="right">
<!--        <template slot="header" slot-scope="scope">-->
<!--          <el-input-->
<!--            v-model="search"-->
<!--            size="mini"-->
<!--            placeholder="输入用户名进行搜索"/>-->
<!--        </template>-->
        <template slot="header" slot-scope="scope">
          <el-form>
            <el-input v-model="username"  size="mini" placeholder="请输入用户名进行搜索" style="width:160px;float: left" />
            <el-button type="primary" size="mini" @click="searchByName" >查询</el-button>
          </el-form>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="this.params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {FindAllUser, UpdateUser} from "@/api/user";
  import config from "@/config";

  export default {
    inject:['reload'],
    data() {
      return {
        userList: [],
        search: '',
        total: 0,
        params: {
          page: 1,
          limit: 10,
        },
        username: '',
      }
    },

    mounted() {
      // FindAllUser().then(res => {
      //   this.userList = res.data
      // })
      this.listUserByPage();
    },

    methods: {
      openUpdatePassword(user) {
        this.$prompt('请输入新的密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          if (!value) {
            this.$message({
              type: 'danger',
              message: '密码不能为空'
            });
            return
          }
          if (value.length < 6) {
            this.$message({
              type: 'danger',
              message: '请输入不少于6位的密码'
            });
            return
          }
          user.password = value
          this.reload();
          UpdateUser(user).then(res => {
            if (res.success) {
              this.$message({
                message: '账号密码修改成功',
                type: 'success',
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
        });
      },

      searchByName() {
        let params = {
          page: this.params.page,
          limit: this.params.limit,
          username: this.username
        };
        this.$axios({
          method: 'get',
          url: config.API_URL + "/user/like",
          params: params,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data.data)
            this.userList = res.data.data.list;
            this.total = res.data.data.total;
          })
          .catch((error) => {
            let errMsg = error.response.data.msg;
            this.$message.error(errMsg)
          })
      },


      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.limit = val;
        this.listUserByPage();
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        this.listUserByPage();
      },

      listUserByPage:function(){
        this.$axios({
          method: 'get',
          url: config.API_URL + "/user/page?page=" + this.params.page + "&limit=" + this.params.limit,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data);
            this.userList = res.data.data.list;
            this.total = res.data.data.total;
          });
      },

    },

  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
